<template>
  <div class="message-container">
    <!-- 顶部导航 -->
    <van-nav-bar title="聊天" class="top-nav">
      <template #left>
        <i class="iconfont icon-zuofanhui" @click="$router.back()"></i>
      </template>
      <template #right>
        <i class="iconfont icon-search"></i>
      </template>
    </van-nav-bar>
    <!-- tab栏 -->
    <van-tabs swipeable class="tabs" v-model="active">
      <van-tab class="tab">
        <div slot="title">好友</div>
        <friends></friends>
      </van-tab>
      <van-tab class="tab">
        <div slot="title">同事</div>
        <div slot="default">
          内容2
        </div>
      </van-tab>
      <van-tab class="tab">
        <div slot="title">关注</div>
        <div slot="default">
          内容3
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import friends from './components/friends'
export default {
  // 定义属性
  data() {
    return {
      active: 0
    }
  },
  components: {
    friends
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {}
}
</script>

<style lang="less">
.message-container {
  // nav-bar
  .van-hairline--bottom::after {
    border: none !important;
  } //去除下划线
  .van-nav-bar__content {
    height: 88px;
    .van-nav-bar__left {
      padding: unset;
      padding-left: 64px;
      .iconfont {
        font-size: 36px;
        line-height: 88px;
      }
    }
    .van-nav-bar__title {
      p {
        font-size: 32px;
        color: #484747;
      }
    }
    .van-nav-bar__right {
      padding: unset;
      padding-right: 58px;
      .iconfont {
        font-size: 40px;
        line-height: 88px;
      }
    }
  }
  .tabs {
    height: 50px;
    padding: 0 35px;
    .van-tabs__wrap {
      padding: 30px;
      margin-bottom: 20px;
    }
    .van-tab {
      width: 168px !important;
      height: 50px;
      border: solid 2px #4a4a4a;
      border-radius: 50px;
      line-height: 100px;
    }
    .van-tab:nth-child(2) {
      margin: 0 50px !important;
    }
    //底部滑动条位置
    .van-tabs__line {
      display: none;
    }
    //tab栏标题
    .van-tab__text {
      font-size: 24px;
      color: #4a4a4a;
    }
  }
}
</style>
